<template>
  <div style="border: 1px solid #E8E8E8;border-radius: 5px;padding: 15px">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button @click="addProjectBalance" v-has="'customer:addProjectBalance'" type="primary" icon="plus">新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'customer:projectBalanceDel'">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->



      <div style="height:calc(100vh - 165px);overflow-y:scroll;">
      <van-list
        v-model="loading"
        :finished="finished"
        offset="30"
        finished-text="没有更多了"
        @load="downLoadData"
        :immediate-check="false">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item 
            :title="item.customerName" 
            :name="i"
            v-for="(item,i) in dataSource"
            :key="i">
            <div class="list">
              <div>结算单编号：{{ item.balanceAccountsNo }}</div>
              <div>客户姓名：{{ item.customerName }}</div>
              <div>项目名称：{{ item.projectName }}</div>
              <div>结算名称：{{item.balanceAccountsName}}</div>
              <div>金额：{{item.money}}</div>
              <div>已核销金额：{{item.writtenOffMoney || 0}}</div>
              <div>待收款金额：{{item.toBeCollectedMoney}}</div>
              <div>状态：{{ examineStatus[item.status] }}</div>
              <div>结算时间：{{item.balanceAccountsTime}}</div>
              <div>备注：{{item.remark}}</div>
              <div>操作：
                <span>
                  <a @click="deteleItem(item)">删除</a>
                  <a @click="editProjectBalance(item)" v-has="'customer:editProjectBalance'" v-if="item.status == 1">编辑</a>
                  <a @click="makeCollections(item)" v-has="'customer:makeCollections'" v-if="item.status == 3 && item.toBeCollectedMoney != 0">收款</a>
                </span>
              </div>
            </div>
           
          </van-collapse-item>
        </van-collapse>
      </van-list>
    </div>

      
    </div>
    <add-project-balance-modal ref="addProjectBalanceModal" @ok="modalOk"></add-project-balance-modal>
    <add-make-collections-modal ref="addMakeCollectionsModal" @ok="modalOk"></add-make-collections-modal>
  </div>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import addProjectBalanceModal from "./modules/addProjectBalanceModal";
  import addMakeCollectionsModal from "./modules/addMakeCollectionsModal";
  import { getAction, deleteAction } from "../../../../../api/manage";
  export default {
    name: 'projectBalanceAccountsList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      addMakeCollectionsModal,
      addProjectBalanceModal,
    },
    props: {
      customerId: {
        required: true,
        default: 0
      },
    },
    data () {
      return {
        activeName: '',
        finished: '',
        examineStatus: ['','草稿','待审批','审批通过','审批不通过'],
        description: '项目结算表管理页面',
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'结算单编号',
            align:"center",
            dataIndex: 'balanceAccountsNo',
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: 'balanceAccountsNo' },
          },
          {
            title:'客户姓名',
            align:"center",
            dataIndex: 'customerName'
          },
          {
            title:'项目名称',
            align:"center",
            dataIndex: 'projectName'
          },
          {
            title:'结算名称',
            align:"center",
            dataIndex: 'balanceAccountsName'
          },
          {
            title:'金额',
            align:"center",
            dataIndex: 'money'
          },
          {
            title:'已核销金额',
            align:"center",
            dataIndex: 'writtenOffMoney',
            customRender:function (text) {
              if (text == null){
                return 0;
              }else {
                return text;
              }
            }
          },
          {
            title:'待收款金额',
            align:"center",
            dataIndex: 'toBeCollectedMoney',
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status',
            customRender:function (text) {
              switch (text) {
                case 1:
                  return <a-tag>草稿</a-tag>
                  break;
                case 2:
                  return <a-tag color="orange">待审批</a-tag>
                  break;
                case 3:
                  return <a-tag color="green">审批通过</a-tag>
                  break;
                case 4:
                  return <a-tag color="red">审批不通过</a-tag>
                  break;
              }
            }
          },
          {
            title:'结算时间',
            align:"center",
            dataIndex: 'balanceAccountsTime'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/ghCustomerProjectBalanceAccounts/list",
          delete: "/ghCustomerProjectBalanceAccounts/delete",
          deleteBatch: "/ghCustomerProjectBalanceAccounts/deleteBatch",
          exportXlsUrl: "/ghCustomerProjectBalanceAccounts/exportXls",
          importExcelUrl: "/ghCustomerProjectBalanceAccounts/importExcel",
          queryCustomerContractFile: "/ghCustomerFileInfo/queryByCustomerId",
        },
        dictOptions:{},
        superFieldList:[],
        contractFile:{},
      }
    },
    created() {
      // this.loadData(1);
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      deteleItem(item){
        if(!this.url.deleteBatch){
          this.$message.error("请设置url.deleteBatch属性!")
          return
        }
        console.log(item)
        if (!item.id) {
          this.$message.warning('结算id不能为空！');
          return;
        } else {
          let that = this;
          this.$confirm({
            title: "确认删除",
            content: "是否删除数据?",
            onOk: function () {
              that.loading = true;
              deleteAction(that.url.deleteBatch, {ids: item.id+''}).then((res) => {
                if (res.success) {
                  that.selectedRowKeys = [];
                  that.$message.success(res.message);
                  that.loadData(1);
                } else {
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      downLoadData(){
        this.ipagination.current++;
        this.finished = false
        this.loadData()
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
        }
        let params = this.getQueryParams();
        params.customerId = this.customerId;
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            let list = res.result.records||res.result;
            this.dataSource = [...this.dataSource, ...list]
            this.ipagination.total = res.result.total;

            this.loading = false
            if(list.length < 10){
              this.finished = true;
            }
          } else {
            this.finished = true;
            this.$message.warning(res.message)
          }
          
        }).finally(() => {
          this.loading = false
        })
      },
      addProjectBalance(){
        this.$refs.addProjectBalanceModal.title = "新增项目结算";
        this.$refs.addProjectBalanceModal.add(this.customerId);
      },
      editProjectBalance(record){
        this.$refs.addProjectBalanceModal.customerSelectFlag = true;
        this.$refs.addProjectBalanceModal.title = "编辑项目结算";
        this.$refs.addProjectBalanceModal.edit(record);
      },
      makeCollections(record){
        this.$refs.addMakeCollectionsModal.title = "新增收款";
        this.$refs.addMakeCollectionsModal.add(record);
      },
      modalOk(){
        this.loadData(1);
      },
      //查看正式合同
      contractDetail(customerId){
        getAction(this.url.queryCustomerContractFile,{customerId:customerId,contractType:2}).then((res) => {
          if (res.success) {
            this.contractFile = res.result;
            window.open(this.contractFile.fileUrl);
          }else {
            this.$message.error("该合同不存在!")
          }
        })
      },
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
  .list{
    line-height: 40px;
    border-top: 1px solid #f6f6f6;
    font-size: 12px;
  }
  
</style>

